<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SHOP</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/aboutShop.css">
  <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
  <style>
    #shop-main {
      margin-top: 36px;
    }

    #shop-main .shop-content {
      width: 772px;
      height: 1644px;
    }

    .part1 {
      height: 505px;
    }

    .part1-text {
      width: 227px;
    }

    .p1-t-1 {
      height: 50px;
      border-bottom: 1px solid #c8c8c8;
      color: #55ab5a;
    }

    .p1-t-2 {
      height: 80px;
      border-bottom: 1px solid #c8c8c8;
      color: #ef5458;
    }

    .p1-t-3 {
      margin-top: 20px;
    }

    .pl25 {
      padding-left: 25px;
    }

    .part2 {
      height: 698px;
      margin: 25px 0 40px 0;
    }

    .part2-header {
      height: 30px;
      border-bottom: 1px solid #009944;
    }

    .header-left {
      width: 110px;
      height: 30px;
      border-radius: 5px;
      line-height: 30px;
    }

    .part2-main{
      height: 442px;
    }
    .main-text{
      padding: 26px 0 0 45px;
    }
    .main-text h4{
     margin: 20px 0 12px 0;
    }
    .main-text p{
     margin-bottom: 5px;
    }
    .part2-footer {
      height: 106px;
      line-height: 106px;
      background-color: #009944;
    }

  </style>
</head>

<body>
  <!-- 头部 -->
  <header>
    <section id="header">
      <div class="logo">
        <img src="./images/logo_02.png" alt="">
      </div>
      <div class="nav-items">
        <li class="nav-item">
          <a href="index.html">首页</a>
          <a href="index.html" class="hover-show">HOME</a>
        </li>
        <li class="nav-item">
          <a href="brand.html">走进尚典</a>
          <a href="brand.html" class="hover-show">BRAND</a>
        </li>
        <li class="nav-item">
          <a href="news.html">新闻动态</a>
          <a href="news.html" class="hover-show">NEWS</a>
        </li>
        <li class="nav-item">
          <a href="video.html">尚典视频</a>
          <a href="video.html" class="hover-show">VIDEO</a>
        </li>
        <li class="nav-item">
          <a href="product.html">产品中心</a>
          <a href="product.html" class="hover-show">PRODUCT</a>
        </li>
        <li class="nav-item">
          <a href="search.html">授权查询</a>
          <a href="search.html" class="hover-show">SEARCH</a>
        </li>
        <li class="nav-item">
          <a href="contact.html">联系我们</a>
          <a href="contact.html" class="hover-show">CONTACT</a>
        </li>
      </div>
    </section>
  </header>

  <!-- 轮播图 -->
  <section id="banner2" class="autorow">
    <img src="./images/banner02_02.png" class="autorow" alt="">
  </section>

  <!-- 产品中心 -->
  <main id="shop-main" class="row automargin flex jf-sb">
    <aside id="news-aside" class="all-flex flex-d autoheight">
      <div class="fs24 aside-title center">产品中心</div>
      <ul class="aside-items">
        <li class="aside-item">
          <a href="product.html" class="fs16 common-black">天然洗发水</a>
          <i class="fa fa-angle-right icon"></i>
        </li>
        <li class="aside-item">
          <a href="product.html" class="fs16 common-black">天然护发素</a>
          <i class="fa fa-angle-right icon"></i>
        </li>
        <li class="aside-item">
          <a href="product.html" class="fs16 common-black">天然精油</a>
          <i class="fa fa-angle-right icon"></i>
        </li>
      </ul>
    </aside>
    <section id="news-content" class="flex flex-d autoheight shop-content">
      <div class="news-content-header autorow all-flex">

        <div class="header-left all-flex">
          <i class="fa fa-home home-icon common-ray" aria-hidden="true"></i>
          <p class="fs18 common-ray fw">尙典动态</p>
        </div>

        <div class="header-right">
          <p class="fs12 common-ray">当前位置：首页 >新闻资讯</p>
        </div>

        <div class="header-line autorow"></div>
      </div>

      <div class="part1 autorow flex jf-sb">
        <img src="./images/shop01.png" alt="">
        <div class="part1-text autoheight flex-d flex">
          <div class="p1-t-1 fs20 pl25 flex jf-center flex-d">
            尚典无硅油洗发水
          </div>
          <div class="p1-t-2 fs14 pl25 flex jf-center flex-d">
            <p>序号：RT-101</p>
            <p>规格：500ml</p>
            <p>功效：鲜活极润 保湿锁水</p>
          </div>
          <div class="p1-t-3 fs12 common-gray pl25">
            保质期：生产批号及限期使用日期详见包装标注蜗牛粘液是指蜗牛爬行过程中分泌的粘液，从中过滤萃取的精华物，我们称之为『蜗牛粘液提取物』。『蜗牛粘液提取物』含天然的胶原蛋白、弹力蛋白、尿囊素、葡萄糖醛酸、多种维生素等，这些成分所含的营养带入肌肤深层，可以增加皮肤的营养，修复肌肤，进而恢复肌肤的柔软、光滑…
          </div>
        </div>
      </div>

      <div class="part2 autorow  flex-d flex jf-sb">
        <div class="part2-header autorow all-flex jf-sb ">
          <div class="header-left fs14 common-bgc-green2 common-fff center">产品详情</div>
          <div class="header-right fs12 common-green common-green2">
            你的护理专家
          </div>
        </div>

        <div class="part2-main flex">
          <img src="./images/shop02.png" alt="">
          <div class="main-text fs12">
            <h4 class="fs16">品牌功效</h4>
            <p>尚典创新头发，“养发一步到位”，唤醒头发肌肤美丽原生力，轻松解除头部压力，逆转发质时空，抗衰减龄,硅油无刺激，平衡头皮水，修护脆弱发丝。</p>

            <h4 class="fs16">品牌说明</h4>
            <p>产品名称：尚典/shangdian</p>
            <p>产品品牌：尚典茶籽无硅油洗发水</p>
            <p>系列：天然无硅油洗发水</p>
            <p>产品产地：广东广州</p>
            <p>适用：任何发质</p>
            <p>保质期：3年</p>
            <p>产品规格：335ml</p>
          </div>
        </div>

        <div class="part2-footer autorow center fw fs24 common-fff">
          天然好品质 中国质造
        </div>
      </div>

      <ul class="part3 autorow flex fs16 common-gray">
        <li class="item autoheight flex-d all-flex">
          <img src="./images/ys.png" alt="">
          <div class="item-text autorow center">
            野参
          </div>
        </li>

        <li class="item autoheight flex-d all-flex">
          <img src="./images/chz.png" alt="">
          <div class="item-text autorow center">
            茶花籽
          </div>
        </li>

        <li class="item autoheight flex-d all-flex">
          <img src="./images/zj.png" alt="">
          <div class="item-text autorow center">
            皂角
          </div>
        </li>

        <li class="item autoheight flex-d all-flex">
          <img src="./images/hsw.png" alt="">
          <div class="item-text autorow center">
            何首乌
          </div>
        </li>
      </ul>
    </section>
  </main>

  <!-- footer -->
  <footer>
    <section id="footer">
      <img src="./images/footer-logo_03.png" alt="" class="footer-logo">
      <div class="footer-line"></div>
      <div class="navigation">
        <h4>导航 NAVIGATION</h4>
        <ul class="navigation-items">
          <li class="navigation-item">网站首页</li>
          <li class="navigation-item">走进尚典</li>
          <li class="navigation-item">新闻动态</li>
          <li class="navigation-item">尚典视频</li>
          <li class="navigation-item">产品中心</li>
          <li class="navigation-item">授权查询</li>
          <li class="navigation-item">联系我们</li>
        </ul>
      </div>
      <div class="footer-line"></div>
      <div class="contact">
        <h4>联系 CONTACT</h4>
        <ul class="contact-items">
          <li class="contact-item">
            地址：广州市海珠区赤岗街道新市头路锦安苑锦豪居C栋502
          </li>
          <li class="contact-item">
            联系电话：400-1886-1345
          </li>
          <li class="contact-item">
            邮箱：203841290@qq.com
          </li>
          <li class="contact-item">
            香港闻名生物有限公司版权所有 粤ICP备0754673
          </li>
        </ul>
      </div>
      <div class="footer-line"></div>
      <img src="./images/2wei_03.png" alt="">
    </section>
  </footer>
</body>

</html>